<template>
  <van-nav-bar title="词云" left-text="返回" left-arrow @click-left="handleToBack" fixed placeholder />
  <div class="item">
    <span>发出(所有人)</span>
    <div v-show="chartSendLoading" class="u-p-10">
      <van-skeleton :row="5" />
    </div>
    <ECharts
      v-show="!chartSendLoading"
      ref="chartSend"
      :option="option"
      :id="id"
      :class="className"
      :style="{ height: height }"
    ></ECharts>
  </div>
  <div class="item">
    <span>收到(所有人)</span>
    <div v-show="chartAcceptLoading" class="u-p-10">
      <van-skeleton :row="5" />
    </div>
    <ECharts
      v-show="!chartAcceptLoading"
      ref="chartAccept"
      :option="option"
      :id="id"
      :class="className"
      :style="{ height: height }"
    ></ECharts>
  </div>
</template>
<script>
import "echarts-wordcloud";
import echarts from "echarts";
import { h, onMounted, defineComponent, ref } from "vue";
import { createComponent } from "echarts-for-vue";
import ResizeObserver from "resize-observer-polyfill";
import { getPlayerWordCloud } from "@/api/player";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  components: {
    ECharts: createComponent({ echarts, h, ResizeObserver }),
  },
});
</script>
<script setup>
const route = useRoute();
const router = useRouter();
const chartSend = ref(null);
const chartSendLoading = ref(true);
const chartAccept = ref(null);
const chartAcceptLoading = ref(true);
const textColor = {
  color1: {
    color: function () {
      return (
        "rgb(" +
        Math.round(Math.random() * 0.25 * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ")"
      );
    },
  },
  color2: {
    color: function () {
      return (
        "rgb(" +
        Math.round((Math.random() * 0.25 + 0.25) * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ")"
      );
    },
  },
  color3: {
    color: function () {
      return (
        "rgb(" +
        Math.round((Math.random() * 0.25 + 0.5) * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ")"
      );
    },
  },
  color4: {
    color: function () {
      return (
        "rgb(" +
        Math.round((Math.random() * 0.25 + 0.75) * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ", " +
        Math.round(Math.random() * 255) +
        ")"
      );
    },
  },
};
const formatWordCloud = (wordCloud) => {
  const wordCloudlist = [];
  for (const [key, value] of Object.entries(wordCloud)) {
    wordCloudlist.push({
      name: key,
      value: value,
    });
  }
  return wordCloudlist;
};
onMounted(() => {
  getPlayerWordCloud(route.params.account_id)
    .then((res) => {
      const myWordCloudList = formatWordCloud(res.my_word_counts);
      chartSend.value.setOption({
        backgroundColor: "#fff",
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "wordCloud",
            shape: "circle",
            gridSize: 1,
            sizeRange: [12, 55],
            rotationRange: [-45, 0, 45, 90],
            textStyle: {
              normal: textColor.color4,
            },
            left: "center",
            top: "center",
            data: myWordCloudList,
          },
        ],
      });
      chartSendLoading.value = false;
      const allWordCloudList = formatWordCloud(res.all_word_counts);
      chartAccept.value.setOption({
        backgroundColor: "#fff",
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "wordCloud",
            shape: "pentagon",
            gridSize: 1,
            sizeRange: [12, 55],
            rotationRange: [-45, 0, 45, 90],
            textStyle: {
              normal: textColor.color1,
            },
            left: "center",
            top: "center",
            data: allWordCloudList,
          },
        ],
      });
      chartAcceptLoading.value = false;
    })
    .catch(() => {
      chartSendLoading.value = false;
      chartAcceptLoading.value = false;
    });
});
const handleToBack = () => {
  router.back();
};
</script>
<style lang="scss" scoped>
.item {
  margin-top: 20px;
  span {
    font-size: 14px;
  }
}
</style>
